<template>
<view class="bgColor" v-if="update">
  <view style="display: flex">
    <view style="flex: 9">
    <uni-card :title="order.userAddress.recipient" @click="addressFun" :extra="order.userAddress.phone">
      <text class="uni-body">{{ order.userAddress.detailedAddress }}</text>
    </uni-card>
    </view>
<!--    <view style="flex: 1">-->
<!--      <u-icon style="padding-top: 90rpx" name="arrow-right" color="#2979ff" size="50"></u-icon>-->
<!--    </view>-->
  </view>

  <view style="margin-top: 30rpx;width: 90%;display: flex;background-color: white;margin: auto;border-radius: 20rpx;padding-top: 30rpx;padding-bottom: 30rpx;padding-right: 20rpx;padding-left: 20rpx">
    <view style="flex: 1">
      <u-image radius="10" :src="order.good.url" width="170" height="170"></u-image>
    </view>
    <view style="flex: 3;padding-left: 10rpx">
      <view style="width: 100%;height: 80%;padding: 10rpx">
        <text style="font-weight: 600;font-size: 28rpx" class="textTile">{{order.good.description}}</text>
      </view>

      <view style="width: 100%;position: relative;height: 20%;padding-left: 5rpx">
        <text style="font-size: 26rpx;color: rgb(154,152,152);margin-right: 20rpx;position: absolute;bottom: 20rpx;background-color: #D7D7D7FF;padding:6rpx 10rpx">{{order.good.specification}}</text>
        <uni-number-box :min="1" :max="9" style="position: absolute;bottom: 10rpx;right: 20rpx" :disabled="true" @change="changeCount" :value="order.count" />
      </view>

    </view>
  </view>

  <view style="width: 90%;margin-left: auto;margin-right:auto;margin-top: 40rpx;background-color: white;border-radius: 20rpx;padding: 30rpx">


    <view style="width: 100%">
      <text style="font-weight: 600;font-size: 32rpx;">价格明细</text>
    </view>

    <view style="width: 100%;margin-top: 20rpx;display: flex">
      <view style="flex: 1">
        <text style="">商品总价</text>
      </view>
      <view style="flex: 3">
        <text style="font-size: 20rpx;color: rgb(164,163,163)">共计{{order.count}}件商品</text>
      </view>
      <view style="flex: 1">
        <text style="font-size: 20rpx;text-align: right">￥</text>
        <text style="text-align: right;position: center">{{order.price}}</text>
      </view>
    </view>

    <view style="width: 100%;margin-top: 20rpx;display: flex">
      <view style="flex: 1">
        <text style="">合计</text>
      </view>
      <view style="flex: 3">
      </view>
      <view style="flex: 1">
        <text style="font-size: 20rpx;text-align: right">￥</text>
        <text style="text-align: right;position: center">{{order.price}}</text>
      </view>
    </view>
  </view>
  <view class="button-bottom" style="width: 100%;background-color: white;display: flex;padding: 20rpx">
    <view style="flex: 2">
      <view style="height: 100%;padding-top: 30rpx;padding-left: 200rpx">

        <text style="font-size: 20rpx;color: rgb(164,163,163);margin-right: 20rpx">共{{order.count}}件</text>
        <text style="font-weight: 600">合计:</text>
        <text style="font-size: 20rpx;text-align: right;color: #ff4b2c">￥</text>
        <text style="text-align: right;color: #ff4b2c">{{order.price}}</text>

      </view>
    </view>
    <view style="flex: 1">
      <button style="background-color: red;color: white" text="提交订单" @click="putOrder">提交订单</button>
    </view>

  </view>

<!--  <mi-loading-->
<!--      ref="Loading"-->
<!--      title="加载中"-->
<!--      hasMask="true"-->
<!--  ></mi-loading>-->
</view>
</template>

<script>
import {mainService} from "../../../api/buyer/main";
import {BASE_IMG_URL} from "../../../api/service";
import {skillService} from "../../../api/buyer/public/skill";
export default {
  name: "OrderFrom",
  data() {
    return {
      user:{},
      addresses:[],
      order:{},
      update:true,
    }
  },
  created(){
    this.user = uni.getStorageSync('userInfo')
    if (!this.user){
      //未登录
      // uni.showToast({
      //   title: '未登录，请去登录',
      //   icon: 'none'
      // });
      //成功后延迟1秒跳转
      setTimeout(() => {
        uni.navigateTo({
          url:"/pages/public/login/login",
          success:res =>{},
          fail:() =>{},
          complete:() => {}
        });
      }, 1000);
    }else{

      this.order.userId=this.user.eid
    }
  },
  onLoad(option) {
    const s = decodeURIComponent(option.order);
    let order = JSON.parse(s)
    this.order = order;
    this.order.price=this.order.count*this.order.price;
    this.init();
    console.log(this.order)
  },
  onShow() {
    let that = this
    uni.$on('updateSelectAddress',function(selectAddress){
      that.order.userAddress=selectAddress;
      that.order.userAddressId=selectAddress.eid;
      that.reload();
    })
  },
  methods:{
    reload(){
      this.update=false
      this.update=true
    },
    init(){
      // console.log(this.user)
      // mainService.findShippingAddressByUserId(this.user.eid).then((res)=>{
      //   this.addresses = res.data
      //   this.order.selectedAddress=res.data.length!=0?this.addresses[0]:{};
      //   this.order.userAddressId=this.order.selectedAddress.eid;
      //   console.log(res.data)
      // })
      mainService.getDefaultAddress().then((res)=>{
        this.order.userAddress=res.data
        this.order.userAddressId=res.data.eid
        this.reload();
        console.log(res.data)
      })
    },
    changeCount(count){
      this.order.count=count;
      this.order.price=this.order.good.price*count;
      console.log("changeCount",this.order)
      this.reload();
    },
    putOrder(){
      
	  if(!this.order.userAddressId){
		  uni.showToast({
		    title: "你选择地址",
		    icon: 'none'
		  });
		  return;
	  }
      uni.showLoading({title: '抢购中',mask:true});
      skillService.skillOrder(this.order).then((res)=>{
        uni.hideLoading();
        console.log(res.data)
        if(res.data.code==0){
          this.order.eid=res.data.orderId;
          this.goPay(this.order)
        }else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        }
      }).catch((err)=>{
        uni.hideLoading();
        uni.showToast({
          title: '提交订单异常，请稍后再试',
          icon: 'none'
        });
      })
    },
    goPay(order){
      let orderInfo={
        price: order.price,
        orderId:order.eid
      }
      uni.navigateTo({
        url: '/pages/buyer/public/PayPage?orderInfo='+encodeURIComponent(JSON.stringify(orderInfo)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    addressFun(){
      uni.navigateTo({
        url: '/pages/buyer/public/Address',
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    }
  }
}
</script>

<style scoped>
.button-bottom {
  position: fixed;
  bottom: calc(var(--window-bottom));
  z-index: 1030;
}
.textTile{
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>